class Pagination {
  constructor(ele, options = {}) {
    this.ele = document.querySelector(ele);

    //设置一套默认值
    this.default = {
      current: options.current || 1, //当前是第几页
      total: options.total || 90, //一共多少条数据
      totalpage: 9, //多少页
      pagesize: options.pagesize || 10, //一页显示多少条
      first: options.first || "first", //默认首页
      prev: options.prev || "prev", //默认上一页
      next: options.next || "next", //默认下一页
      last: options.last || "last", //默认尾页
      go: options.go || "go", //默认跳转
      change: options.change || (() => {}), //每次改变触发
    };

    this.btnCss = {
      float: "left",
      padding: "5px",
      margin: "5px",
      border: "1px solid #333",
      cursor: "pointer",
    };

    this.init();
  }

  init() {
    this.default.totalpage = Math.ceil(
      this.default.total / this.default.pagesize
    );
    this.renderHtml();
    this.setBoxStyle();
    this.bindEvent();
  }

  renderHtml() {
    const { first, prev, next, last ,current} = this.default;
    const frg = document.createDocumentFragment();

    //首页标签
    frg.appendChild(setCss(creEle("div", "first", first), this.btnCss));
    frg.appendChild(setCss(creEle("div", "prev", prev), this.btnCss));
    const list = setCss(creEle("div", "list", ""), {
      margin: 0,
      padding: 0,
      float: "left",
    });
    list.appendChild(this.creItem());
    frg.appendChild(list);
    frg.appendChild(setCss(creEle("div", "next", next), this.btnCss));
    frg.appendChild(setCss(creEle("div", "last", last), this.btnCss));
    const jump = setCss(creEle("div", "jump", ""), {
      margin: 0,
      padding: 0,
      float: "left",
    });
    jump.appendChild(this.creJump());
    frg.appendChild(jump);

    this.ele.innerHTML = "";
    this.ele.appendChild(frg);

    this.default.change(current);
  }

  creItem() {
    const { current, totalpage } = this.default;
    const frg = document.createDocumentFragment();

    if (totalpage <= 9) {
      for (let i = 1; i <= totalpage; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }
      return frg;
    }

    const point = document.createElement("p");
    point.innerHTML = "...";
    setCss(point, {
      padding: "5px",
      margin: "5px",
      float: "left",
    });

    if (current < 5) {
      for (let i = 1; i <= 5; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }

      frg.appendChild(point.cloneNode(true));

      for (let i = totalpage - 1; i <= totalpage; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        frg.appendChild(p);
      }
      return frg;
    }

    if (current === 5) {
      for (let i = 1; i <= 7; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }

      frg.appendChild(point.cloneNode(true));

      for (let i = totalpage - 1; i <= totalpage; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        frg.appendChild(p);
      }
      return frg;
    }

    if (current > 5 && current < totalpage - 4) {
      for (let i = 1; i <= 2; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }

      frg.appendChild(point.cloneNode(true));

      for (let i = current - 2; i <= current + 2; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }

      frg.appendChild(point.cloneNode(true));

      for (let i = totalpage - 1; i <= totalpage; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        frg.appendChild(p);
      }
      return frg;
    }

    if (current === totalpage - 4) {
      for (let i = 1; i <= 2; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }

      frg.appendChild(point.cloneNode(true));

      for (let i = totalpage - 6; i <= totalpage; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }
      return frg;
    }

    if (current > totalpage - 4) {
      for (let i = 1; i <= 2; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }

      frg.appendChild(point.cloneNode(true));

      for (let i = totalpage - 4; i <= totalpage; i++) {
        const p = setCss(creEle("p", "item", i), this.btnCss);
        p.dataset.index = i;
        if (i === current) setCss(p, { backgroundColor: "orange" });
        frg.appendChild(p);
      }
      return frg;
    }
  }

  creJump() {
    const { go , current } = this.default;
    const frg = document.createDocumentFragment();

    const inp = document.createElement("input");
    inp.value = current;
    setCss(inp, {
      height: "28px",
      width: "30px",
      float: "left",
      outline: "none",
      margin: "5px",
    });
    frg.appendChild(inp);

    const btn = document.createElement("button");
    btn.className = "go";
    btn.innerHTML = go;
    setCss(btn, {
      height: "30px",
      width: "30px",
      float: "left",
      outline: "none",
      margin: "5px",
      cursor: "pointer",
    });
    frg.appendChild(btn);

    return frg;
  }

  setBoxStyle() {
    setCss(this.ele, {
      height: "50px",
      padding: "10px 30px 0",
      position: "absolute",
    });
  }

  bindEvent() {
    this.ele.addEventListener("click", (e) => {
      e = e || window.event;
      const target = e.target || e.srcElement;

      const { current, totalpage } = this.default;

      if (target.className === "next" && current < totalpage) {
        this.default.current++;
        this.renderHtml();
      }

      if (target.className === "prev" && current > 1) {
        this.default.current--;
        this.renderHtml();
      }

      if (target.className === "last" && current < totalpage) {
        this.default.current = totalpage;
        this.renderHtml();
      }

      if (target.className === "first" && current > 1) {
        this.default.current = 1;
        this.renderHtml();
      }

      if (target.className === "next" && current < totalpage) {
        this.default.current++;
        this.renderHtml();
      }

      if (target.className === "item") {
        const index = target.dataset.index - 0;
        if (index === current) return;
        this.default.current = index;
        this.renderHtml();
      }

      if (target.className === "go") {
        let index = target.previousElementSibling.value - 0;
        if (index <= 1) index = 1;
        if (index >= totalpage) index = totalpage;
        if (index === current) return;
        this.default.current = index;
        this.renderHtml();
      }
    });
  }
}

function creEle(nodeName, className, text) {
  const ele = document.createElement(nodeName);
  ele.className = className;
  ele.innerHTML = text;
  return ele;
}

function setCss(ele, styles) {
  for (let key in styles) {
    ele.style[key] = styles[key];
  }

  return ele;
}
